<template>
  <div class="app-container home">
    <el-button @click="dopoint()"></el-button>
    <div id="map"></div>

  </div>
</template>
  
<script setup name="Index">
const version = ref("3.8.8");

import "ol/ol.css"; // ol提供的css样式（必须引入）
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileLayer from "ol/layer/WebGLTile.js";
import TileWMS from "ol/source/TileWMS.js";
import View from "ol/View.js";
import { TileArcGISRest, XYZ, ImageTile } from "ol/source.js";
import { fromLonLat } from "ol/proj";

function initMap() {
  var wmsSource = new TileWMS({
    url: "http://localhost:8888/postmap/wms",
    params: { LAYERS: "geo_hl07_line,geo_cun_point", TILED: true },
    serverType: "geoserver",
    // Countries have transparency, so do not fade tiles:
    transition: 0,
  });
  const layer =  new TileLayer({
    id: 'ditu-1',
    source: new XYZ({
      // projection: projection,
      url: `http://localhost:8888/postmap/TileServer?T=img_w&tk=&x={x}&y={y}&z={z}`,
      crossOrigin: 'anonymous',
      wrapX: false
    })
  })
  const layers = [

    new TileLayer({
      id: "ditu-1",
      source: new XYZ({
        url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        crossOrigin: "anonymous",
        wrapX: false,
      }),
    }),
    layer,
    // new TileLayer({
    //   extent: [-13884991, 2870341, -7455066, 6338219],
    //   source: new TileWMS({
    //     url: "https://ahocevar.com/geoserver/wms",
    //     params: { LAYERS: "topp:states", TILED: true },
    //     serverType: "geoserver",
    //     // Countries have transparency, so do not fade tiles:
    //     transition: 0,
    //   }),
    // }),
    // new TileLayer({
    //   //extent: [-13884991, 2870341, -7455066, 6338219],
    //   source: wmsSource,
    // }),
  ];
  var view = new View({
    center: fromLonLat([108.0, 34]), // 经度 10.10, 纬度 15.0
    zoom: 10,
  });
  const map = new Map({
    layers: layers,
    target: "map",
    view: view,
  });

  map.on("singleclick", function (evt) {
    // document.getElementById("info").innerHTML = "";
    const viewResolution = view.getResolution();
    const url = wmsSource.getFeatureInfoUrl(
      evt.coordinate,
      viewResolution,
      "EPSG:3857",
      { INFO_FORMAT: "text/html" }
    );
    if (url) {
      fetch(url)
        .then((response) => response.text())
        .then((html) => {
          // document.getElementById("info").innerHTML = html;

          console.info(html);
        });
    }
  });
}
onMounted(() => {
  initMap();
  //不要在这写Bus.on，在busEventsDict中增加！！！！！！！！！！
});

// 经纬度转瓦片编号
function lon2tile(lon, zoom) {
    return (Math.floor((lon+180)/360*Math.pow(2,zoom)));
}

function lat2tile(lat, zoom) {
    return (Math.floor(1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI/2 * Math.pow(2, zoom)));
}

// 瓦片编号转经纬度，计算的是瓦片左上角的经纬度坐标，即西北方向，如果要计算东南方向的坐标则x和y各加1就行了
function tile2lon(x, z) {
    return (x/Math.pow(2,z)*360-180);
}

function tile2lat(y, z) {
    const n = Math.PI-2*Math.PI*y/Math.pow(2,z);
    return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
}
/**

纬度
18.2138
53.5572

经度
73.5557
135.0857

rending:坐标X:22,坐标Y:17,文件名称14,minx:7514065.627500001,miny:1252344.2712499984,maxx:8766409.89875,maxY:2504688.5425000004
rending:坐标X:28,坐标Y:17,文件名称14,minx:1.5028131254999999E7,miny:1252344.2712499984,maxx:1.6280475526250001E7,maxY:2504688.5425000004
rending:坐标X:23,坐标Y:17,文件名称14,minx:8766409.89875,miny:1252344.2712499984,maxx:1.0018754169999998E7,maxY:2504688.5425000004
rending:坐标X:27,坐标Y:17,文件名称14,minx:1.3775786983749997E7,miny:1252344.2712499984,maxx:1.5028131254999999E7,maxY:2504688.5425000004
rending:坐标X:28,坐标Y:18,文件名称13,minx:1.5028131254999999E7,miny:2504688.5425000004,maxx:1.6280475526250001E7,maxY:3757032.813749999
rending:坐标X:27,坐标Y:18,文件名称13,minx:1.3775786983749997E7,miny:2504688.5425000004,maxx:1.5028131254999999E7,maxY:3757032.813749999
rending:坐标X:22,坐标Y:18,文件名称13,minx:7514065.627500001,miny:2504688.5425000004,maxx:8766409.89875,maxY:3757032.813749999
rending:坐标X:26,坐标Y:17,文件名称14,minx:1.2523442712499999E7,miny:1252344.2712499984,maxx:1.3775786983749997E7,maxY:2504688.5425000004
rending:坐标X:24,坐标Y:17,文件名称14,minx:1.0018754169999998E7,miny:1252344.2712499984,maxx:1.127109844125E7,maxY:2504688.5425000004
rending:坐标X:25,坐标Y:17,文件名称14,minx:1.127109844125E7,miny:1252344.2712499984,maxx:1.2523442712499999E7,maxY:2504688.5425000004
 */

function dopoint(){
  // console.info("dddd");
  var xmin=lon2tile(73.5557,5)
  var ymin=lon2tile(18.2138,5)
  
  var xmin=lat2tile(73.5557,5)
  var ymin=lat2tile(18.2138,5)
  
  console.info("lon,lat:"+ymin,xmin);
}

</script>
  
<style scoped lang="scss">
#map {
  width: 1600px;
  height: 1000px;
}

* {
  stroke: #333333, symbol("shape://vertline");
  stroke-width: 3px;
  :nth-stroke(2) {
    size: 12;
    stroke: #333333;
    stroke-width: 1px;
  }
}
</style>
  
  